<!-- 领队查看小组信息 -->
<template>
  <view :style="{height : pageHeight + 'px'}" class="content">
    <!-- 景点选择 -->
    <view class="attractionSelect">
      景点：
      <view class="selectColumn">
        <uni-data-select v-model="selectValue" :localdata="scenicList" @change="changeSelect"></uni-data-select>
      </view>
    </view>
    <!-- 小组列表 -->
    <view class="groupList">
      <!-- 小组 -->
      <view v-for="(item,index) in groupList" :key="index" class="groupItem">
        <!-- 表头 -->
        <view class="groupTitle">
          <view class="groupNum">
            {{ item.name }}
          </view>
          <view style="display: flex; align-items: center; flex: 1;">
            <view class="leader">
              组长：{{ item.leader }}
              <image mode="aspectFit"
                     src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/phoneColorW.png">
              </image>
              {{ item.leaderTel }}
            </view>
          </view>
        </view>
        <!-- 成员列表 -->
        <view class="memberList">
          <view v-for="(ite,index) in item.parties" :key="index" class="memberItem">
            <view :class="[ite.role ===2? 'leaderBg': 'memberBg']">
              <view class="memberInfo">
                <view :class="[ite.role === 2?'leaderTag':'memberTag']">
                  <text v-if="ite.role === 2">组长</text>
                  <text v-else>组员</text>
                </view>
                <view class="memberName">
                  <image mode="aspectFit"
                         src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/passengerIcon.png"></image>
                  {{ ite.name }}
                </view>
                <view class="phone">
                  <image mode="aspectFit"
                         src="https://echengtuhua.oss-cn-shenzhen.aliyuncs.com/phoneIcon.png"></image>
                  {{ ite.tel || ite.parentTel }}
                </view>
              </view>
              <view class="taskStatus">
                <view class="status">
                  景点：
                  <text v-if="ite.status === 1">已签到</text>
                  <text v-else
                        style="color: red;">未签到
                  </text>
                </view>
                <view class="task">
                  未完成任务数：
                  <text v-if="ite.unCompleteCount===0">{{ ite.unCompleteCount }}</text>
                  <text
                      v-else style="color: red;">{{ ite.unCompleteCount }}
                  </text>
                </view>
              </view>
            </view>
          </view>
        </view>
        <!-- 查看小组路线按钮 -->
        <view class="selectBtnWarp" @tap="toSelectRoute(item,index)">
          查看小组路线
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import {
  getGroupInfo
} from '@/api/tourplan.js'

export default {
  data() {
    return {
      pageHeight: 750,
      selectValue: 0,
      scenicList: [],
      groupList: [],
      itineraryId: 0,
      scenicId: 0, //景点id
      groupId: 0,
    }
  },
  onLoad(options) {
    const that = this
    uni.getSystemInfo({
      success: function (res) {
        that.pageHeight = res.windowHeight
      }
    });
    that.initData(options)
  },
  methods: {
    initData(options) {
      const that = this
      // that.loadingTips = true
      that.itineraryId = options.itineraryId
      that.groupId = options.groupId
      const dataJSON = JSON.parse(decodeURIComponent(options.scenic))
      that.scenicList = this.initSenicData(dataJSON);
      that.selectValue = that.scenicList[0].value
      that.getInfoList(that.selectValue)
    },

    //获取小组信息
    getInfoList(scenicId) {
      const that = this
      getGroupInfo({
        itineraryId: that.itineraryId,
        scenicId: scenicId,
        tel: uni.getStorageSync('userinfo').phone
      }).then(res => {
        that.groupList = res
        // that.loadingTips = false
      }).catch(err => {

      })
    },

    //重组景点数据
    initSenicData(list) {
      const newSenicList = list.map(list => ({
        value: list.id,
        text: list.name
      }))
      return newSenicList
    },

    //切换景点
    changeSelect(e) {
      const that = this
      that.selectValue = e
      that.getInfoList(that.selectValue)
    },

    //查看该小组的路线
    toSelectRoute(item, index) {
      uni.navigateTo({
        url: '/pages/tourplan/groupInfoTL/selectRouteTL/selectRouteTL?groupId=' + this.groupId +
            '&itineraryId=' + this.itineraryId
      })
    },

  }
}
</script>

<style>
@import url('groupInfoTL.css');
</style>
